<template>
    <div class="error-page">
        <div class="error-container">
            <div class="error-code">500</div>
            <div class="error-title">服务器错误</div>
            <div class="error-message">抱歉，服务器出现了故障，请稍后再试</div>
            <div class="error-actions">
                <el-button type="primary" @click="goHome">返回首页</el-button>
                <el-button @click="goBack">返回上一页</el-button>
                <el-button type="info" @click="refresh">刷新页面</el-button>
            </div>
            <div class="error-illustration">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" class="error-svg">
                    <path d="M769.4,454.9c-5.3,9.2-13.5,16.2-23.5,19.7c-40.5,14.7-81,29.5-121.4,44.2c-20.7,7.5-41.4,15.1-62.1,22.6
          c-23.2,8.4-51.5,1.8-68.8-15.5L648.8,237.5c17.3-17.3,45.6-23.9,68.8-15.5c41.2,15,82.4,30,123.6,45.1
          c20.1,7.3,32.8,27.5,29.3,48.8C865.9,356.7,817.7,405.8,769.4,454.9z" fill="#f2f2f2" />
                    <path d="M121.4,454.9c5.3,9.2,13.5,16.2,23.5,19.7c40.5,14.7,81,29.5,121.4,44.2c20.7,7.5,41.4,15.1,62.1,22.6
          c23.2,8.4,51.5,1.8,68.8-15.5L242,237.5c-17.3-17.3-45.6-23.9-68.8-15.5c-41.2,15-82.4,30-123.6,45.1
          c-20.1,7.3-32.8,27.5-29.3,48.8C24.9,356.7,73.1,405.8,121.4,454.9z" fill="#f2f2f2" />
                    <circle cx="400" cy="400" r="200" fill="#f5f5f5" />
                    <path
                        d="M400 300C400 300 375 330 350 330C325 330 300 300 300 300C300 300 325 270 350 270C375 270 400 300 400 300Z"
                        fill="#e74c3c" />
                    <path
                        d="M500 300C500 300 475 330 450 330C425 330 400 300 400 300C400 300 425 270 450 270C475 270 500 300 500 300Z"
                        fill="#e74c3c" />
                    <path d="M330 370H470V390H330V370Z" fill="#e74c3c" />
                    <circle cx="350" cy="300" r="20" fill="#fff" />
                    <circle cx="450" cy="300" r="20" fill="#fff" />
                    <circle cx="350" cy="300" r="10" fill="#333" />
                    <circle cx="450" cy="300" r="10" fill="#333" />
                    <path
                        d="M400 430C430 430 460 460 460 460C460 460 400 470 400 470C400 470 340 460 340 460C340 460 370 430 400 430Z"
                        fill="#e74c3c" />
                    <path d="M294 190L310 175 384 240 375 250 294 190Z" fill="#e74c3c" />
                    <path d="M506 190L490 175 416 240 425 250 506 190Z" fill="#e74c3c" />
                </svg>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const goHome = () => {
    router.push('/');
};

const goBack = () => {
    router.go(-1);
};

const refresh = () => {
    window.location.reload();
};
</script>

<style scoped>
.error-page {
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f7fa;
    padding: 20px;
}

.error-container {
    max-width: 800px;
    text-align: center;
    padding: 40px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.error-code {
    font-size: 120px;
    font-weight: 700;
    color: #e74c3c;
    line-height: 1.2;
    margin-bottom: 10px;
}

.error-title {
    font-size: 32px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 16px;
}

.error-message {
    font-size: 18px;
    color: #606266;
    margin-bottom: 30px;
}

.error-actions {
    margin-bottom: 40px;
}

.error-actions .el-button {
    margin: 0 10px;
    padding: 12px 24px;
    font-size: 16px;
}

.error-illustration {
    max-width: 400px;
    margin: 0 auto;
}

.error-svg {
    width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    .error-code {
        font-size: 80px;
    }

    .error-title {
        font-size: 24px;
    }

    .error-message {
        font-size: 16px;
    }

    .error-actions .el-button {
        margin: 0 5px;
        padding: 10px 20px;
        font-size: 14px;
    }

    .error-illustration {
        max-width: 280px;
    }
}
</style>